<template>
  <div>
    <a-row>
      <a-col span="5" align="center" justify="space-around">
        <a-row type="flex">
          <a-button type="primary" @click="goAddModel">添加</a-button>
        </a-row>
      </a-col>
      <a-col span="12" offset="7">
        <a-row type="flex" justify="space-around">
          <a-col span="8">
            <a-select defaultValue="1" style="width: 100%" @change="handleChange">
              <a-select-option value="1">通知单模板</a-select-option>
              <a-select-option value="2">收据模板</a-select-option>
            </a-select>
          </a-col>
          <a-col span="13">
            <a-input-search></a-input-search>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <a-table
        :columns="columns"
        :dataSource="data"
      >
        <a slot="action" slot-scope="text,record" href="javascript:;">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" href="#">
              操作
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item key="0">
                <a href="javascript:void(0)" @click="editDetail(record.id)">编辑</a>
              </a-menu-item>
              <a-menu-item key="1">
                <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a>
      </a-table>
    </a-row>
  </div>
</template>

<script>
import { getTollModel, delModel } from '@/api/cashier'
import { mapGetters } from 'vuex'
export default {
    name: 'charge_toll_tollModel',
    data() {
        return {
            data:[],
            columns : [
                { title: '模版名称',  dataIndex: 'name', key: '' },
                { title: '模版类型',  dataIndex: 'type_text', key: '' },
                { title: '纸张类型', dataIndex: 'paper_text', key: '' },
                { title: '打印布局', dataIndex: 'layout_text', key: '' },
                { title: '说明', dataIndex: 'remark', key: '' },
                {
                    title: '操作',
                    key: 'operation',
                    scopedSlots: { customRender: 'action' }
                }
            ]
        }
    },
    computed: {
        rowSelection() {
            const { selectedRowKeys } = this
            return {
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name
                    }
                })
            }
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        goAddModel(){
            this.$router.push({ name: 'charge_toll_add_model' })
        },
        handleChange(value) {
            console.log(`selected ${value}`)
        },
        getList() {
            getTollModel({ token: this.token() })
                .then(res => {
                    this.data = res.data;
                    this.selfCount = true
                })
                .catch(err => {
                    console.log(err)
                })
        },
        editDetail(id) {
            this.$router.push({ name: 'charge_toll_add_model', params: { id, id } })
        },
        remove(id) {
            delModel(Object.assign({id:id},{token:this.token()})).then(res => {
                if(res.code == 0) {
                    this.$notification.success({
                        message: '成功',
                        description: res.msg
                    });
                    setTimeout(() => {
                        this.getList();
                    }, 1000)
                } else {
                    this.$notification['error']({
                        message: '错误',
                        description: res.msg,
                        duration: 4
                    })
                }

            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                    duration: 4
                })
            })
        },
    }
}
</script>

<style scoped>
</style>